<project-header class="top-header"></project-header>
<project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div id="scrollable-content" class="middle-container has-scroll">
      <div class="middle-header">
        <div class="container-fluid">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded">Loading...</div>
          <div ng-if="route">
            <h1>
              {{route.metadata.name}}
              <route-warnings ng-if="route.spec.to.kind !== 'Service' || services"
                              route="route"
                              service="services[route.spec.to.name]">
              </route-warnings>
              <small class="meta">created <relative-timestamp timestamp="route.metadata.creationTimestamp"></relative-timestamp></small>
              <div class="pull-right dropdown" ng-hide="!('routes' | canIDoAny)">
                <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
                  Actions
                  <span class="caret" aria-hidden="true"></span>
                </button>
                <a href=""
                   class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
                   data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
                <ul class="dropdown-menu actions action-button">
                  <li ng-if="'routes' | canI : 'update'">
                    <a ng-href="{{route | editResourceURL}}" role="button">Edit</a>
                  </li>
                  <li ng-if="'routes' | canI : 'update'">
                    <edit-link
                      resource="route"
                      kind="Route"
                      alerts="alerts">
                    </edit-link>
                  </li>
                  <li ng-if="'routes' | canI : 'delete'">
                    <delete-link
                      kind="Route"
                      resource-name="{{route.metadata.name}}"
                      project-name="{{route.metadata.namespace}}"
                      alerts="alerts">
                    </delete-link>
                  </li>
                </ul>
              </div>
            </h1>
            <labels labels="route.metadata.labels" clickable="true" kind="routes" project-name="{{route.metadata.namespace}}" limit="3"></labels> 
          </div>
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content gutter-top">
        <div class="container-fluid">
          <div class="row" ng-if="route">
            <div class="col-sm-12">
              <div class="resource-details">
                <dl class="dl-horizontal left">
                  <dt>Hostname<span ng-if="route.status.ingress.length > 1">s</span>:</dt>
                  <dd>
                    <span ng-if="!route.status.ingress">
                      {{route | routeLabel}}
                      <span data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">
                        <status-icon status="'Pending'" disable-animation></status-icon>
                        <span class="sr-only">Pending</span>                        
                      </span>
                    </span>  
                    <div ng-repeat="ingress in route.status.ingress">
                      <span ng-if="(route | isWebRoute)">
                        <a href="{{route | routeWebURL : ingress.host}}" target="_blank">{{route | routeLabel : ingress.host}}</a>
                      </span>
                      <span ng-if="!(route | isWebRoute)">
                        {{route | routeLabel : ingress.host}}
                      </span>                    
                      &ndash;
                      <span ng-init="admittedCondition = (ingress | routeIngressCondition : 'Admitted')">
                        <span ng-if="!admittedCondition">admission status unknown for router '{{ingress.routerName}}'</span>
                        <span ng-if="admittedCondition.status === 'True'">
                          exposed on router '{{ingress.routerName}}' <relative-timestamp timestamp="admittedCondition.lastTransitionTime"></relative-timestamp>
                        </span>
                        <span ng-if="admittedCondition.status === 'False'">
                          rejected by router '{{ingress.routerName}}' <relative-timestamp timestamp="admittedCondition.lastTransitionTime"></relative-timestamp>
                        </span>                        
                      </span>
                    </div>
                  </dd>
                  <dt>Path:</dt>
                  <dd>
                    <span ng-if="route.spec.path">{{route.spec.path}}</span>
                    <span ng-if="!route.spec.path"><em>none</em></span>
                  </dd>
                  <dt>{{route.spec.to.kind || "Routes to"}}:</dt>
                  <dd>
                    <a ng-href="{{route.spec.to.name | navigateResourceURL : route.spec.to.kind : route.metadata.namespace}}">{{route.spec.to.name}}</a>
                  </dd>
                  <dt>Target Port:</dt>
                  <dd>
                    <span ng-if="route.spec.port.targetPort">
                      {{route.spec.port.targetPort}}
                    </span>
                    <span ng-if="!route.spec.port.targetPort"><em>any</em></span>
                  </dd>
                  <div ng-if="route.spec.port.targetPort && route.spec.to.kind === 'Service' && (route | routeTargetPortMapping : services[route.spec.to.name])" class="help-block">
                    This target port will route to {{route | routeTargetPortMapping : services[route.spec.to.name]}}.
                  </div>
                </dl>
                <div ng-if="route.spec.alternateBackends.length" class="row">
                  <div class="col-sm-12 mar-bottom-lg">
                    <h4>Traffic</h4>
                    <div class="help-block">
                      This route splits traffic across multiple services.
                    </div>
                  </div>
                  <div class="col-sm-5 col-sm-push-7 mar-bottom-lg">
                    <route-service-pie route="route"></route-service-pie>
                  </div>
                  <div class="col-sm-7 col-sm-pull-5">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th>Service</th>
                          <th>Weight</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>
                            <a ng-href="{{route.spec.to.name | navigateResourceURL : route.spec.to.kind : route.metadata.namespace}}">{{route.spec.to.name}}</a>
                          </td>
                          <td>
                            {{route.spec.to.weight}}
                          </td>
                        </tr>
                        <tr ng-repeat="alternate in route.spec.alternateBackends">
                          <td>
                            <a ng-href="{{alternate.name | navigateResourceURL : alternate.kind : route.metadata.namespace}}">{{alternate.name}}</a>
                          </td>
                          <td>
                            {{alternate.weight}}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div style="margin-bottom: 10px;">
                  <h4>TLS Settings</h4>
                  <dl class="dl-horizontal left" ng-if="route.spec.tls">
                    <dt>Termination type:</dt>
                    <dd>{{route.spec.tls.termination}}</dd>
                    <dt ng-if-start="route.spec.tls.termination === 'edge'">Insecure Traffic:</dt>
                    <dd ng-if-end>{{route.spec.tls.insecureEdgeTerminationPolicy || 'None'}}</dd>
                    <dt>Certificate:</dt>
                    <dd>
                      <span ng-show="route.spec.tls.certificate && !reveal.certificate">
                        <a href="" ng-click="reveal.certificate = true">Show</a>
                      </span>
                      <span ng-if="!route.spec.tls.certificate"><em>none</em></span>
                    </dd>
                    <div ng-if="reveal.certificate">
                      <pre class="clipped">{{route.spec.tls.certificate}}</pre>
                    </div>
                    <dt>Key:</dt>
                    <dd>
                      <span ng-if="route.spec.tls.key && !reveal.key">
                        <a href="" ng-click="reveal.key = true">Show</a>
                      </span>
                      <span ng-if="!route.spec.tls.key"><em>none</em></span>
                    </dd>
                    <div ng-if="reveal.key">
                      <pre class="clipped">{{route.spec.tls.key}}</pre>
                    </div>
                    <dt>CA Certificate:</dt>
                    <dd>
                      <span ng-show="route.spec.tls.caCertificate && !reveal.caCertificate">
                        <a href="" ng-click="reveal.caCertificate = true">Show</a>
                      </span>
                      <span ng-if="!route.spec.tls.caCertificate"><em>none</em></span>
                    </dd>
                    <div ng-if="reveal.caCertificate">
                      <pre class="clipped">{{route.spec.tls.caCertificate}}</pre>
                    </div>
                    <dt>Destination CA Cert:</dt>
                    <dd>
                      <span ng-show="route.spec.tls.destinationCACertificate && !reveal.destinationCACertificate">
                        <a href="" ng-click="reveal.destinationCACertificate = true">Show</a>
                      </span>
                      <span ng-if="!route.spec.tls.destinationCACertificate"><em>none</em></span>
                    </dd>
                    <div ng-if="reveal.destinationCACertificate">
                      <pre class="clipped">{{route.spec.tls.destinationCACertificate}}</pre>
                    </div>
                  </dl>
                  <div ng-if="!route.spec.tls"><em>TLS is not enabled for this route</em></div>
                </div>
              </div>
              <annotations annotations="route.metadata.annotations"></annotations>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
</project-page>
